import {
  Button,
  Card,
  Col,
  Form,
  Input,
  Select,
  Image,
  Row,
  Space,
  Switch,
} from 'antd';
import Table, { ColumnsType } from 'antd/es/table';
import { TableRowSelection } from 'antd/es/table/interface';

import { useCommon } from '@/hooks/common';
import { toYuan } from '@/utils/format-number';

import { ProductModal } from './modal';

export default function DoneProductListPage() {
  const uri = 'finished-product';
  const {
    data = {},
    ModalPros,
    searchForm,
    onSearchFormReset,
    onCreate,
    onSwitch,
    onSwitchTop,
    doDel,
    onEdit,
    onSearch,
    handleChange,
  } = useCommon({ name: '', groupId: [], disable: '' }, uri, {
    name: '',
    id: 0,
    groupId: [],
    disable: 1,
    sort: 1,
    url: '',
  });

  const columns: ColumnsType<any> = [
    { title: '商品名称', dataIndex: 'goodsName', width: 100 },
    {
      title: '缩略图',
      dataIndex: 'thumbs',
      width: 200,
      render: (thumbs) => (
        <div className="flex gap-[10px]">
          {JSON.parse(thumbs).map((item: string, index: number) => {
            return <Image key={index} preview className="!w-[80px]" src={item} />;
          })}
        </div>
      ),
    },
    {
      title: '价格', dataIndex: 'price', align: 'center', width: 60, render: (val) => {
      return toYuan(val);
    } },
    {
      title: '状态',
      dataIndex: 'disable',
      align: 'center',
      width: 120,
      render: (disable, record) => (
        <Switch checked={disable === 0} onChange={() => onSwitch(record.id)} />
      ),
    },
    {
      title: '置顶',
      dataIndex: 'isTop',
      align: 'center',
      width: 120,
      render: (isTop, record) => (
        <Switch checked={isTop === 0} onChange={() => onSwitchTop(record.id)} />
      ),
    },
    // {
    //   title: '操作',
    //   key: 'operation',
    //   align: 'center',
    //   width: 100,
    //   render: (_, record) => (
    //     <div className="flex w-full justify-center text-gray">
    //       {/* <IconButton onClick={() => onEdit(record)}>
    //         <Iconify icon="solar:pen-bold-duotone" size={18} />
    //       </IconButton> */}
    //       <Popconfirm
    //         title="确认删除该数据？"
    //         okText="确定"
    //         cancelText="取消"
    //         placement="left"
    //         onConfirm={() => doDel(record.id)}
    //       >
    //         <IconButton>
    //           <Iconify icon="mingcute:delete-2-fill" size={18} className="text-error" />
    //         </IconButton>
    //       </Popconfirm>
    //     </div>
    //   ),
    // },
  ];

  // rowSelection objects indicates the need for row selection
  const rowSelection: TableRowSelection<any> = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    onSelect: (record, selected, selectedRows) => {
      console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
      console.log(selected, selectedRows, changeRows);
    },
  };

  return (
    <Space direction="vertical" size="large" className="w-full">
      <Card>
        <Form form={searchForm} onFinish={onSearch}>
          <Row gutter={[16, 16]}>
            <Col span={8} lg={6}>
              <Form.Item<any> label="名称" name="goodsName" className="!mb-0">
                <Input />
              </Form.Item>
            </Col>
            <Col span={8} lg={6}>
              <Form.Item<any> label="状态" name="disable" className="!mb-0">
                <Select
                  options={[
                    { label: '全部', value: '' },
                    { label: '已上架', value: 0 },
                    { label: '已下架', value: 1 },
                  ]}
                />
              </Form.Item>
            </Col>
            <Col span={24} lg={12}>
              <div className="flex justify-end">
                <Button onClick={onSearchFormReset}>重置</Button>
                <Button type="primary" htmlType="submit" className="ml-4">
                  查询
                </Button>
              </div>
            </Col>
          </Row>
        </Form>
      </Card>

      <Card
        title="产品列表"
        extra={
          <div className="flex flex-row gap-[10px]">
            <Button type="primary" onClick={() => onCreate({})}>
              新增
            </Button>
          </div>
        }
      >
        <Table
          rowKey="id"
          size="small"
          pagination={{ total: data.totalCount }}
          scroll={{ x: 'max-content' }}
          columns={columns}
          dataSource={data.list}
          rowSelection={{ ...rowSelection }}
          onChange={handleChange}
        />
      </Card>
      <ProductModal {...ModalPros} />
    </Space>
  );
}
